<!--
 * @description 线下可使用商户
 * @author dumeng
 * @date 2021/7/29
 -->
<template>
  <div v-if="visible" class="xxksysh-page">
    <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="线下可使用商户" fullscreen center :before-close="handleCancel">
      <section class="select-inner">
        <el-row type="flex" justify="space-around" :gutter="10">
          <el-col :span="19">
            <section class="xxksysh-page-main">
              <section class="main-table">
                <v-table :list="list" tag="xxksysh" :list-loading="listLoading" :filter-column="filtercolumn" @handleSelectionChange="handleSelectionChange" />
                <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
              </section>
            </section>
          </el-col>
          <el-col :span="5">
            <p>已选择商户：</p>
            <ul class="select-user">
              <li v-for="(item, index) in selection" :key="index">{{ item.merchantName }}</li>
            </ul>
          </el-col>
        </el-row>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="padding: 8px 30px;" @click="handleSelect()">确 定</el-button>
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { queryPage } from './api'
import Pagination from '@/components/Pagination'
import VTable from '@/components/Table'
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  name: 'Xxksysh',
  components: { VTable, Pagination },
  directives: { elDragDialog },
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10
      },
      list: [],
      total: 0,
      listLoading: false,
      selection: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleCancel() {
      this.$emit('update:visible', false)
    },
    handleSelect() {
      this.$emit('select', this.selection)
      this.handleCancel()
    },
    filtercolumn(scope, item) {
      if (item === 'merchantSt') { // 商户状态
        return scope.row[item] === '1' ? '正常' : '关闭'
      } else if (item === 'authFlag') { // 商户权限
        return scope.row[item] === '1' ? '有权限' : '无权限'
      } else {
        return scope.row[item]
      }
    },
    handleSelectionChange(arr) {
      this.selection = arr
    },

    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        queryPage(query).then(response => {
          this.list = response.data.data.rows || []
          this.total = response.data.data.total || 0
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    }
  }
}
</script>

<style lang="scss">
.xxksysh-page {
  position: relative;
  .el-dialog__body {
    max-height: calc(100vh - 109px);
    min-height: calc(100vh - 109px);
    position: relative;
    .select-inner{
      position: relative;
      &::before {
        content: '';
        height: 1px;
        background-color: #e2e3e8;
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
      }
    }
    .xxksysh-page-main {
      padding: 10px;
      position: relative;
      height: 100%;
      &::before {
        content: '';
        width: 1px;
        background-color: #e2e3e8;
        position: absolute;
        right: 0;
        top: -20px;
        bottom: 0;
      }
    }
    .select-user {
      padding: 0;
      margin: 0;
      height: calc(100vh - 185px);
      overflow: auto;
      list-style: none;

      li {
        padding: 5px 8px;
        margin: 0;
        float: left;
        list-style: none;
        font-size: 14px;
        @include font-color($mainColor);
        @include border-color(1px, solid, $mainColor);
        border-radius: 5px;
        margin-left: 8px;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
